<template>
	<ve-dialog
		:width="dialogWidth"
		title="资源审核"
		:show.sync="isShow"
		:on-close="onCloseDialog"
	>
		<ve-content :class="{'audit-dialog':true,'single':resourceId}" v-loading="isLoading">
			<div class="resource-info" v-if="resourceId">
				<div class="resource-info-item" v-for="(info,index) in resourceInfoList" :key="index">
					<p class="resource-info-name">{{ info.name }}</p>
					<p class="resource-info-value">
						<template v-if="info.value">
							<template v-if="Array.isArray(info.value) && info.value.length">
								<span v-for="(label, index2) in info.value" :key="index2">
									{{ label[info.key] }}{{ index2!==info.value.length-1?'、':'' }}
								</span>
							</template>
							<template v-else>
								{{ !info.value.length || !info.value? '':info.value }}
							</template>
						</template>
					</p>
				</div>
				<div class="resource-info-item">
					<p class="resource-info-name project">项目：</p>
					<p class="resource-info-value">
						<template v-if="resourceInfo.rcDisposeResourceVideoProjectResponseVos">
							<el-button
								v-for="project in resourceInfo.rcDisposeResourceVideoProjectResponseVos"
								:key="project.projectId"
								:type="projectId===project.projectId ?'primary': 'plain'"
								@click="changeProject(project)"
							>
								{{ project.projectName }}
							</el-button>
						</template>
					</p>
				</div>
				<!-- 项目信息 -->
				<div class="project-info" v-if="currentProject.length">
					<div class="line" />
					<div class="resource-info-item" v-for="(info,index) in currentProject" :key="index">
						<p class="resource-info-name">{{ info.name }}</p>
						<p class="resource-info-value">
							<template v-if="info.value">
								<template v-if="Array.isArray(info.value) && info.value.length">
									<span v-for="(label, index2) in info.value" :key="index2">
										{{ label[info.key] }}{{ index2!==info.value.length-1?'、':'' }}
									</span>
								</template>
								<template v-else>
									{{ !info.value.length || !info.value? '':info.value }}
								</template>
							</template>
						</p>
					</div>
				</div>
			</div>
			<div class="audit-option">
				<div class="audit-radio">
					<el-radio-group v-model="checkState" @change="onChangeCheckState">
						<el-radio label="P">审核通过</el-radio>
						<el-radio label="N">审核不通过</el-radio>
					</el-radio-group>
				</div>
				<el-form
					:model="auditForm"
					:rules="auditFormRules"
					ref="auditFormRef"
					label-width="110px"
					v-if="checkState === 'N'"
					label-position="top"
				>
					<el-form-item label="不通过原因：" prop="notPassType">
						<el-radio-group v-model="auditForm.notPassType">
							<el-radio label="R">资源错误</el-radio>
							<el-radio label="P">属性错误</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="原因描述：" prop="notPassExplain">
						<el-input
							style="width:100%"
							maxlength="100"
							placeholder="请输入审核不通过原因"
							type="textarea"
							:show-word-limit="true"
							:autosize="{ minRows: 6}"
							resize="none"
							v-model.trim="auditForm.notPassExplain"
						/>
					</el-form-item>
				</el-form>
			</div>
		</ve-content>
		<span slot="footer">
			<el-button @click="onCloseDialog" :loading="isLoading">
				取 消
			</el-button>
			<el-button type="primary" :loading="isShowCheckLoading||isLoading" @click="onCheckResource(false)">
				确定
			</el-button>
			<!-- 批量审核时不显示 -->
			<el-button
				type="primary"
				v-if="resourceId"
				:loading="isShowCheckLoading||isLoading"
				@click="onCheckResource(true)"
			>
				确定并继续审核
			</el-button>
		</span>
	</ve-dialog>
</template>
<script>
import coursewareApi from "@rc/apis/rc/courseware.mjs";
export default {
    props:{
        isShow: {
            type: Boolean,
            default: false
        },
        resourceId: {
            type: String,
            default: ''
        },
        resourceIds: {
            type: Array,
            default: ()=>[]
        },
        //单个single 批量batch
        type:{
           type: String,
           required: true
        }
    },
    watch: {
        resourceId(val) {
            if(this.type==='single'){
                this.resetForm();
                this.resetData();
            }
            val && this.queryResourceInfo();
        },
        resourceIds(){
            if(this.type==='batch'){
                this.resetForm();
                this.resetData();
            }
        }
	},
    computed:{
        dialogWidth(){
            return this.resourceId?'1000px':'460px';
        }
    },
    data() {
        return {
                isLoading:false,// 查询资源信息loading
                isShowCheckLoading:false,// 确定审核按钮loading
                resourceInfo: {}, //查询到的资源信息
                currentProject: [],// 资源下当前显示的项目
                projectId: '',//当前选择的项目
                resourceInfoList: [ //页面展示的资源信息列表
                    {name:"资源名称：",value:''},
                    {name:"授课老师：",value:''},
                    {name:"资源用途：",value:''},
                    {name:"星级：",value:''},
                    {name:"地区：",value:''}
                ],
                checkState:'P',// 审核通过P或不通过N
                auditForm: { //审核不通过表单
                    id:'',
                    notPassType: '',
                    notPassExplain: ''
                },
                auditFormRules: { // 审核不通过表单校验规则
                    notPassType: [
                        {
                            required: true,
                            message: '请选择不通过原因',
                            trigger: 'change'
                        },
                    ],
                    notPassExplain: [
                        {
                            required: true,
                            message: '请输入审核不通过原因',
                            trigger: 'blur'
                        },
                    ]
                },
            };
    },
    methods: {
        /**
         * 切换审核,清除表单数据
         */
        onChangeCheckState(val) {
            if(val === 'P') {
                this.auditForm.notPassType = '';
                this.auditForm.notPassExplain = '';
            }
        },
        //查询资源信息
        queryResourceInfo() {
            this.finished = false;
            this.isLoading = true;
            coursewareApi.queryResourceInfo({
                data: {
                    resourceId: this.resourceId,
                },
                success: (data) => {
                    this.resourceInfo = data;
                    let resourceInfoList = [];
                    let resourceUse = {};
                    let starLable = {};
                    //获取标签信息
                    let rcResourceLabelInfoResponseVoList = data.rcResourceLabelInfoResponseVoList;
                    if(rcResourceLabelInfoResponseVoList) {
                        resourceUse = rcResourceLabelInfoResponseVoList.find(label => label.name === '资源用途');
                        starLable = rcResourceLabelInfoResponseVoList.find(label => label.name === '星级');
                    }

                    resourceInfoList = [
                        {
                            name:"资源名称：",
                            value: (data.sectionNumber ? '第'+data.sectionNumber +'节课 ':'') + data.name
                        },
                        {
                            name:"授课老师：",
                            value: data.professorName ? `${data.professorName}-${data.professorDptName}` : ''
                        },
                        {
                            name:"资源用途：",
                            value: resourceUse &&  resourceUse.labelDetails,
                            key:'name'
                        },
                        {
                            name:"星级：",
                            value: starLable &&  starLable.labelDetails,
                            key:'name'
                        },
                        {
                            name:"地区：",
                            value: data.rcResourceAreaResponseVos,
                            key:'cityName'
                        }
                    ];
                    this.resourceInfoList = resourceInfoList;
                    const projectList = data.rcDisposeResourceVideoProjectResponseVos;
                    if(projectList && projectList.length) {
                        this.handleProjectInfo(projectList[0]);
                    }
                },
                complete: () => {
                    this.finished = true;
                    this.isLoading = false;
                }
            });
        },
        /**
         * 切换展示的项目
         */
        changeProject(project) {
           this.handleProjectInfo(project);
        },
        //拼接项目信息参数
        handleProjectInfo(project) {
            this.projectId = project.projectId;
            // project
            this.currentProject = [
                 {
                    name:"科目：",
                    value: project.subjectList,
                    key:'subjectName'
                },
                {
                    name:"系列课：",
                    value: project.seriesCourseList,
                    key:'seriesCourseName'
                },
                {
                    name:"适用年份：",
                    value: project.applicableYear,
                },
                {
                    name:"章节目录：",
                    value: project.rcChapterList,
                    key:'title'
                },
                {
                    name:"知识点：",
                    value: project.rcCknowledgeList,
                    key:'title'
                }
            ];
        },
        /**
         * @description 关闭弹窗
         */
        onCloseDialog() {
            this.resetForm();
            this.$emit('close');
        },
        resetData() {
            this.checkState = 'P';
            this.resourceInfo = {};
            this.currentProject= [];
            this.projectId='';
            this.resourceInfoList = [
                {name:"资源名称：",value:''},
                {name:"授课老师：",value:''},
                {name:"资源用途：",value:''},
                {name:"星级：",value:''},
                {name:"地区：",value:''}
            ];
        },
        resetForm() {
            this.auditForm = {
                id:'',
                notPassType: '',
                notPassExplain: ''
            };
            this.$refs.auditFormRules && this.$refs.auditFormRules.resetFields();
        },
        /**
         * 点击确定按钮
         * @param isContinue
         */
        onCheckResource(isContinue=false) {
            if(this.checkState === 'P') {
                if(this.type==='batch'){
                    this.batchCheckResourceVideo();
                } else {
                    this.checkResourceVideo(isContinue);
                }
            } else {
                this.$refs.auditFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    }
                    if(this.type==='batch'){
                        this.batchCheckResourceVideo();
                    }   else    {
                        this.checkResourceVideo(isContinue);
                    }
                });
            }
        },
        /**
         * 批量审核按钮
         */
        batchCheckResourceVideo(){
            this.isShowCheckLoading = true;
            coursewareApi.batchCheckResourceVideo({
                data: {
                    resourceIds: this.resourceIds,
                    checkState: this.checkState,
                    notPassType: this.auditForm.notPassType,
                    notPassExplain: this.auditForm.notPassExplain,
                    oldCheckState: 'W' //待审核
                },
                success: () => {
                    this.$message.success('审核操作成功');
                    this.$emit('success');
                    this.onCloseDialog();
                },
                complete: () => {
                    this.isShowCheckLoading = false;
                }
            });
        },
         /**
         * 审核资源
         * @param isContinue
         */
        checkResourceVideo(isContinue = false) {
            this.isShowCheckLoading = true;
            coursewareApi.checkResourceVideo({
                data: {
                    resourceId: this.resourceId,
                    checkState: this.checkState,
                    notPassType: this.auditForm.notPassType,
                    notPassExplain: this.auditForm.notPassExplain,
                    oldCheckState: 'W' //待审核
                },
                success: () => {
                    this.$message.success('审核操作成功');
                    if(isContinue) {
                        this.$emit('next-audit');
                    } else {
                        this.$emit('success');
                        this.onCloseDialog();
                    }
                },
                complete: () => {
                    this.isShowCheckLoading = false;
                }
            });

        }
    }
  };
</script>
<style lang="less" scoped>
    .audit-dialog{
        display: flex;
        font-size: 14px;
        color: #3a3d4b;
        &.single{
            background-color: #f4f5f9;
        }
        .resource-info,.audit-option{
            background-color: #fff;
        }

        .resource-info{
            flex:1;
            margin-right: 16px;
            padding: 16px 16px ;
            overflow-y: scroll;
            .resource-info-item{
                display: flex;
            }
            .resource-info-name{
                line-height: 32px;
                text-align: right;
                width: 100px;
                flex-shrink: 0;
                &.project{
                    width: 70px;
                    margin-top: 10px;
                }
            }
            .resource-info-value{
                line-height: 32px;
            }
            /deep/ .el-button+.el-button{
            margin-left: 0;
        }
            /deep/ .el-button{
                margin-right: 10px;
                margin-top: 10px;
            }
        }
        .audit-option{
            width: 372px;
            flex-shrink: 0;
            padding: 10px;
            .audit-radio{
                margin-bottom: 10px;
            }
            /deep/ .el-form-item__content{
                margin-left: 20px;
            }
        }
        .line{
            border-top: 1px solid #F0F0F0;
            margin: 5px 0 10px;
        }
        .project-info{
            padding-left: 10px;
        }
    }

</style>
